<!DOCTYPE html>
<html>
    <head>
        <title>MasterStroke</title>
        <script src="Client/lib/fabric.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <link href="css/main.css" rel="stylesheet" />
        <link href="css/m-styles.min.css" rel="stylesheet">        
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <link href="css/bootstrap-switch.css" rel="stylesheet">
        <link href="css/metro-bootstrap.css" rel="stylesheet">
        <link href="css/message.css" rel="stylesheet">
        <script data-main="Client/main" src="Client/require.js"></script>
        <script type="text/javascript">
            require
            (
                require
                (
                    ["lib/jquery",
                     "lib/jquery-ui",
                     "MasterStroke/Bindings/ShapesBinding",
                     "MasterStroke/Bindings/ApplyClassBinding",
                     "MasterStroke/Bindings/RangeBinding",
                     "MasterStroke/Bindings/SelectedTabBinding",
                     "MasterStroke/Bindings/SwitchBinding",
                     "MasterStroke/Bindings/ContentBinding"],
                    function()
                    {
                        require
                        (
                            ["lib/bootstrap",
                              "lib/bootstrap-contextmenu",
                              "lib/m-radio",
                              "MasterStroke/ViewModels/DocumentViewModel",
                              "lib/knockout-bootstrap",
                              "lib/knockout-sortable",
                              "lib/bootstrap-switch"],
                            function()
                            {
                                var doc = new MasterStroke.ViewModels.DocumentViewModel("canvas");
                                var ko = require("lib/knockout");
                                ko.applyBindings(doc);
                                doc.start();
                            }
                        )
                    }
                )
            )
        </script>
    </head>
    <body class="master-stroke">

        <!-- Container -->
        <div data-bind="visible: isDocumentVisible" class="fill">

            <!-- Toolbar -->
            <div class="tabbable toolbar" data-bind="contentBind: 'Pages/toolbar.html'">                
            </div>            

            <!-- Document -->
            <div class="document-container fill" data-bind="visible: selectedTask && (selectedTab() === 'homeTab')">

                <!-- Thumbnail container -->
                <div class="thumbnail-container">

                    <!-- Task selector -->
                    <div class="m-btn-group span-width no-margin task-selector">
                      <a class="m-btn blue dropdown-carrettoggle no-margin span-width no-padding-left" data-toggle="dropdown">
                        <div class="float-left selector-text" data-bind="with: selectedTask"><span data-bind="text:name"></span></div>
                        <div class="float-right selector-icon"><span class="caret white"></span></div>
                      </a>
                      <ul class="m-dropdown-menu" data-bind="foreach: tasks">
                          <li data-bind="event: {click: $root.selectTask}"><a href="#"><span data-bind="text: name"></span></a></li>                          
                      </ul>
                    </div>

                    <!-- Thumbnails -->
                    <div class="thumbnail-list" data-bind="with: selectedTask">
                        <div data-bind="sortable: {template: 'thumbail-template', data: frames, afterMove: $root.reorderFrame}"></div>
                    </div>
                </div>

                <!-- Canvas container -->
                <div class="canvas-container" 
                        data-toggle="context" 
                        data-target="#canvas-context-menu">

                    <div data-bind="visible: selectedTask() && selectedTask().selectedFrame">
                        <canvas id="canvas"></canvas>
                    </div>

                    <!-- Canvas context menu -->
                    <div id="canvas-context-menu">
                        <ul class="dropdown-menu" role="menu">
                            <li><a data-bind="event: {click: deleteShapes}">Delete</a></li>
                            <li><a data-bind="event: {click: bringToFront}">Bring to front</a></li>
                            <li><a data-bind="event: {click: sendToBack}">Send to back</a></li>
                            <li class="divider"></li>
                            <li><a>Separated link</a></li>
                        </ul>
                    </div>
                </div>                
            </div>

            <!-- Tasks -->
            <div class="task-container fill" data-bind="visible: (selectedTab() == 'tasksTab'), contentBind: 'Pages/tasks.html'">                
            </div>
            
        </div>        

        <!-- Join dialog -->
        <div id="joinDialog" class="modal hide fade no-rounded-edge" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <h3>Document options</h3>
            </div>
            <div class="modal-body">
                <div class="m-input-prepend">
                    <span class="add-on">Pick a user name</span>
                    <input class="m-wrap" size="16" type="text" placeholder="User Name" data-bind="value: userName">
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="m-btn blue icn-only" data-bind="event: {click: joinDocument}">Join document <i class="m-icon-swapright m-icon-white"></i></a>
            </div>
        </div>

        <!-- Add task -->
        <div id="addTaskDialog" 
                class="modal hide fade no-rounded-edge" 
                tabIndex="-1" 
                role="dialog" 
                aria-labelledby="myModalLabel" 
                aria-hidden="true">
            <div class="modal-header">
                <h3>Add task</h3>
            </div>
            <div class="modal-body">
                <div class="m-input-prepend">
                    <span class="add-on">Task name</span>
                    <input class="m-wrap" size="16" type="text" placeholder="Mickey Mouse Pose" data-bind="value: newTaskViewModel.name">
                </div>
                <div>Description</div>
                <textarea class="m-wrap" placeholder="Create running Mickey" data-bind="value: newTaskViewModel.description"></textarea>
            </div>
            <div class="modal-footer">
                <a href="#" class="m-btn blue icn-only" data-bind="event: {click: addNewTask}">Create task <i class="m-icon-swapright m-icon-white"></i></a>
            </div>
        </div>

        <!-- Add sound dialog -->
        <div id="addSoundDialog" 
                class="modal hide fade no-rounded-edge" 
                tabIndex="-1" 
                role="dialog" 
                aria-labelledby="myModalLabel" 
                aria-hidden="true">
            <div class="modal-header">
                <h3>Add sound</h3>
            </div>
            <div class="modal-body">
                <div class="m-input-prepend">
                    <span class="add-on">Sound url</span>
                    <input class="m-wrap" size="16" type="text" data-bind="value: soundUrl">
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="m-btn blue icn-only" data-bind="event: {click: addSound}">Add sound <i class="m-icon-swapright m-icon-white"></i></a>
            </div>
        </div>

        <!-- Templates -->
        <script type="text/html" id="thumbail-template">

            <div class="thumbnail" 
                    data-bind="shapesBind: shapes,
                                      applyClassBind: {property: ko.observable(function() {return ($parent.selectedFrame() === $data); })(), classes: ['selected-thumbnail']}"
                    data-target=".thumbnail-context-menu"
                    data-toggle="context">                

                <!-- Thumbnail context menu -->
                <div class="thumbnail-context-menu context-menu">
                    <ul class="dropdown-menu" role="menu">
                        <li><a data-bind="event: {click: $root.deleteFrame}">Delete</a></li>
                        <li><a data-bind="event: {click: $root.cloneFrame}">Clone</a></li>
                        <li><a data-bind="event: {click: $root.setFrameAsReference}">Add as Reference</a></li>
                    </ul>
                </div>

                <div class="thumbnail-svg-container",
                        data-bind="event: {click: $root.selectFrame}">
                    <svg xmlns="http://www.w3.org/2000/svg" 
                             xmlns:xlink="http://www.w3.org/1999/xlink"
                             version="1.1"
                             width="200"
                             height="150"
                             viewBox="0 0 2000 1500">      
                    </svg>
                </div>

                <!-- New review marker -->
                <div class="thumbnail-new-review" data-bind="visible: newReviewAvailable, event: {click: $root.selectFrame}">
                    <img src="images/splat.png" data-bind="tooltip: {title: 'New reviews available', placement: 'right'}"/>
                </div>
            </div>
        </script>    
    </body>
</html>